﻿
var svgDocument = null;
var svgRootElement = null;
var mapObject = null;

var containerWidth = 0.0;//容器的宽度(px)
var containerHeight = 0.0;//容器的高度(px)
var minLongitude = 0.0;//当前视图的最小经度(左上角)，也是viewBox的第一个值
var minLatitude = 0.0;//当前视图的最小纬度(左上角)，也是viewBox的第二个值
var maxLongitude = 0.0;//当前视图的最大经度(右下角)
var maxLatitude = 0.0;//当前视图的最大经度(右下角)
var maxViewBoxWidth = 0.0;//viewBox的最大宽度（初始化时的宽度认为是最大的）
var maxViewBoxHeight = 0.0;//viewBox的最大高度（初始化时的高度认为是最大的）

var currentViewBoxWidth = 0.0;//当前viewBox的宽度（第三个值）
var currentViewBoxHeight = 0.0;//当前viewBox的高度（第四个值）
var currentViewBoxX = 0.0;
var currentViewBoxY = 0.0;

var horizonScale = 0.0;
var verticalScale = 0.0;
var currentScale = 0.0;
var maxScale = 0.0;
var minScale = 1;
var currentOperation = "";
var isBusing = false;
var isMeasuring = false;
var startPanLocationX = 0.0;
var startPanLocationY = 0.0;
var zoomRectangle = null;
var measuringLine = null;
var xTime = 0.0;
var yTime = 0.0;
var moveStep = 0.0;
var zoomStep = 0.0;
var viewBox = null;


var zoomRect = null;

var attribXmlNS = "http://www.tempuri.org/attrib";


function Init(evt)
{   
   InitBaseParamers();
    
    //绑定鼠标事件
    AddEventHandler();
    
    AddTempGraphicUnits();
    
    //初始化地图数据
    GetMapData("getmap.ashx?scale=1&minlon=-178.21760559082&minlat=-71.4062423706055&maxlon=-66.9692687988281&maxlat=-18.9217853546143");   
    
    top.SetMapFullExtent = SetMapFullExtent; 
}

function InitBaseParamers()
{
    svgDocument = evt.target.ownerDocument;
    svgRootElement = svgDocument.documentElement;
    mapObject = svgDocument.getElementById("mapObject");
       
    containerWidth = window.innerWidth;
    containerHeight = window.innerHeight;
     
    GetCurrentViewBox();
    
    minLongitude = currentViewBoxX;
    minLatitude = currentViewBoxY;    
    maxLatitude = minLatitude + currentViewBoxHeight;
    maxLongitude = minLongitude + currentViewBoxWidth;
    maxViewBoxHeight = currentViewBoxHeight;
    maxViewBoxWidth = currentViewBoxWidth;
    
    xTime = currentViewBoxWidth / currentViewBoxWidth;
    yTime = currentViewBoxHeight / currentViewBoxHeight;
}

function AddEventHandler()
{
	mapObject.addEventListener("mousedown",OnMapMouseDown,false);
	svgRootElement.addEventListener("mousemove",OnMapMouseMove,false);
	mapObject.addEventListener("mouseup",OnMapMouseUp,false);
}

function AddTempGraphicUnits()
{  

    var nodeText = null;
    
	//随着ViewBox一起变化覆盖在地图上供产生鼠标事件的矩形
	nodeText = "<rect x='-10000%' y='-10000%' width='100000%' height='1000000%' fill='blue' fill-opacity='0.3' />";
	//nodeText =  "<rect x='" + currentViewBoxX + "' y='" + currentViewBoxY + "' width='" + currentViewBoxWidth + "' height='" + currentViewBoxHeight + "' fill='blue'/>";
	AddChildNode(mapObject,nodeText);
	
	//拉框放大所需的矩形框
	nodeText = "<rect id='zoomrect' visibility='hidden'  width='0' height='0' fill='red' fill-opacity='0.7' stroke='none' pointer-events='none'/>";
	zoomRect = AddChildNode(mapObject,nodeText);
	
	/*
	//测距尺所需的矩形事件层及直线
	nodeText = "<rect id='rulerBck' width='" + maxViewBoxWidth + "' height='" + maxViewBoxHeight + "' fill-opacity='0' pointer-events='none' onclick='rulerStart(evet)' onmousemove='rulerMessuring(evt)'/>";
	rulerBck = AddChildNode(mapObject,nodeText,null);
	node = "<path id='rulerLine' fill='none' stroke='#A52A2A' pointer-events='none' stroke-width='3pt'/>";
	rulerLine = AddChildNode(mapObject,nodeText);
	
	//鼠标跟随信息提示框图形
	nodeText = "<rect id='infotipRect' x='20' y='0' width='100' height='17' rx='3' ry='3' style='visibility:hidden;fill:rgb(165,206,239);stroke-width:1;stroke:rgb(0,0,0);opacity:0.8;pointer-events:none'/>";
	nforct = parseSVG(svgRootElement,nodeText);
	nodeText = "<text id='infotip' style='fill:rgb(0,0,0);visibility:hidden;font-weight:normal;font-size:12;pointer-events:none'>!</text>";
	infotext = parseSVG(svgRootElement,nodeText);
	
	//城市名字标注层
	CityLayer = AddChildNode(svgRootElement,"<g id='cities' style='visibility:visible'/>");
	
	//查询地物高亮现实动画
	nodeText = "<circle fill='none' stroke='blue' stroke-width='5' stroke-opacity='0.9' visibility='hidden'>";
	nodeText += "<animate attributeName='r' from='1' to'='50' dur='1' repeatCount='indefinite'/>";
	nodeText += "</circle>";
	HlSymbol = AddChildNode(mapObject,nodeText);
	*/
}


function OnMapMouseDown(evt)
{
    GetCurrentOperation();
    
    switch(currentOperation)
    {
        case "ZoomInByRect":
            GetCurrentViewBox();
            
            var x = evt.clientX * horizonScale + currentViewBoxX;
            var y = evt.clientY * verticalScale + currentViewBoxY;
            
            zoomRect.setAttributeNS(null,"x",x);
            zoomRect.setAttributeNS(null,"y",y);
            zoomRect.setAttributeNS(null,"width",0);
            zoomRect.setAttributeNS(null,"height",0);
            
            zoomRect.setAttributeNS(null,"visibility","visible");
           
            isBusing = true;
            break;
             case "ZoomInByClick":
            var scale= 1.0000 / mapObject.getCurrentScale();
          var trx=mapObject.getCurrentTranslate().getX();
          var try1=mapObject.getCurrentTranslate().getY();
          var curCoordx=scale*(evt.getClientX()-trx);
          var curCoordy=scale*(evt.getClientY()-try1);
        //zoomin
          mapObject.currentScale = mapObject.currentScale * 2; 
        //pan
          scale= 1.0000 / mapObject.getCurrentScale();
          cX = -mapObject.currentTranslate.x *scale + (containerWidth * scale /2) 
          cY = -mapObject.currentTranslate.y *scale + (containerHeight * scale /2)

          offsetX = curCoordx - cX;
          offsetY = curCoordy - cY;

          mapObject.currentTranslate.x = mapObject.currentTranslate.x  - offsetX / scale;
          mapObject.currentTranslate.y = mapObject.currentTranslate.y  - offsetY / scale;
          
          break;
    }
}

function OnMapMouseMove(evt)
{
test(evt);
    if(!isBusing) return;
    switch(currentOperation)
    {
        case "ZoomInByRect":
            var x = parseFloat(zoomRect.getAttributeNS(null,"x"));
            var y = parseFloat(zoomRect.getAttributeNS(null,"y"));
            
              var cx = evt.clientX * horizonScale + currentViewBoxX;
            var cy = evt.clientY * verticalScale + currentViewBoxY;
            
            x = cx < x ? cx: x;
            y = cy < y ? cy : y;
            
            zoomRect.setAttributeNS(null,"x",x);
            zoomRect.setAttributeNS(null,"y",y);
            
            var width = Math.abs(evt.clientX * horizonScale + currentViewBoxX - x);
            var height = Math.abs(evt.clientY * verticalScale + currentViewBoxY - y);
            
         
            
            zoomRect.setAttributeNS(null,"width",width);
            zoomRect.setAttributeNS(null,"height",height);
            break;
        
    }
}

function OnMapMouseUp(evt)
{
    if(!isBusing) return;
    
    switch(currentOperation)
    {
        case "ZoomInByRect":
            
            var x = parseFloat(zoomRect.getAttributeNS(null,"x"));
            var y = parseFloat(zoomRect.getAttributeNS(null,"y"));
            var width = evt.clientX * horizonScale + currentViewBoxX - x;
            var height = evt.clientY * verticalScale + currentViewBoxY - y;
            
            SetViewBox(x,y,width,height);
            
            
            //width = width < 0 ? 0 : width;
            //height = height < 0 ? 0 : height;
            
            isBusing = false;        
            break;
    }
    
    
}

function GetCurrentOperation()
{
    currentOperation = svgRootElement.getAttribute("attrib:operation");
}


function test(evt)
{
    GetCurrentViewBox();
    
    var geoX =  minLongitude + (evt.clientX - mapObject.currentTranslate.x) * (maxViewBoxWidth / containerWidth) / mapObject.currentScale;
    
    var geoY = minLatitude + (evt.clientY - mapObject.currentTranslate.y) * (maxViewBoxHeight / containerHeight) / mapObject.currentScale;
    
    var infos = "evt.cilentX : " + evt.clientX + "<p>";
    infos += "evt.cllientY : " + evt.clientY  + "<p>";
    infos += "scale : " + svgRootElement.getCurrentScale() + "<p>";
    infos +="geoX : " + geoX + "<p>";
    infos +="geoY : " + geoY + "<p>";
    infos +="viewBox :" + currentViewBoxX + " " + currentViewBoxY + " "  + currentViewBoxWidth + " " + currentViewBoxHeight + "<p>";
    infos +=currentViewBoxWidth / maxViewBoxWidth + "<p>";
    infos +=currentViewBoxHeight / maxViewBoxHeight + "<p>" + svgRootElement.currentTranslate.x;
    
    var div = window.top.document.getElementById("infos");
    div.innerHTML = infos;
}